<template>
  <div class="flex flex-col h-full p-3">
    <div class="flex-shrink-0 flex flex-row items-center justify-between">
      <h2 class="text-3xl">项目列表</h2>
      <div>
        <a-space>
          <a-button size="small" @click="onAbout">关于</a-button>
          <a-button size="small" type="primary" @click="onAdd">新增</a-button>
        </a-space>
      </div>
    </div>
    <div class="flex-1 h-0 pt-3">
      <vxe-grid v-bind="gridOptions" :data="tablePage.list" :loading="loading">
        <template #name="{ data, rowIndex }">
          <span :class="[{ 'text-green-600': data[rowIndex].enable }]">{{ data[rowIndex].name }}</span>
        </template>
        <template #enable="{ data, rowIndex }">
          {{ data[rowIndex].enable === 1 ? '是' : '否' }}
        </template>
        <template #createdAt="{ data, rowIndex }">
          {{ dateFormat(data[rowIndex].createdAt) }}
        </template>
        <template #updatedAt="{ data, rowIndex }">
          {{ dateFormat(data[rowIndex].updatedAt) }}
        </template>
        <template #operate="{ data, rowIndex }">
          <a-space>
            <a-button type="text" size="small" @click="() => onEdit(data[rowIndex])">编辑</a-button>
            <a-button type="link" size="small" @click="() => onToApiPage(data[rowIndex])">API列表</a-button>
            <a-popconfirm
              title="确认删除？"
              ok-text="是"
              cancel-text="否"
              placement="leftTop"
              @confirm="() => onDel(data[rowIndex])"
            >
              <a-button type="text" size="small" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
        <template #pager>
          <!--使用 pager 插槽-->
          <vxe-pager
            :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
            v-model:current-page="tablePage.current"
            v-model:page-size="tablePage.size"
            :total="tablePage.total"
            @page-change="onPageChange"
          >
          </vxe-pager>
        </template>
      </vxe-grid>
      <AddEditModal ref="AddEditModalRef" @saveSuc="onAddSuc" @editSuc="onUpdateSuc"></AddEditModal>
      <AboutModal ref="AboutModalRef"></AboutModal>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import AddEditModal from './AddEditModal.vue'
import { useRequest } from 'vue-request'
import { page, remove } from '@render/service/FrontProjectService'
import { iso8061DatetimeStrFormat } from '@render/util/DateUtil'
import type { ComponentExposed } from 'vue-component-type-helpers'
import AboutModal from './AboutModal.vue'

type AboutModalExpose = ComponentExposed<typeof AboutModal>
const AboutModalRef = ref<AboutModalExpose>()
const $router = useRouter()
type AddEditModalExpose = ComponentExposed<typeof AddEditModal>
const AddEditModalRef = ref<AddEditModalExpose>()

function onAbout() {
  AboutModalRef.value.open()
}
const {
  run,
  data: tablePage,
  loading,
} = useRequest(page, {
  manual: true,
  initialData: { current: 1, list: [], size: 15, total: 0 },
})
run(1, 15)

const { run: runRemove } = useRequest(remove, {
  manual: true,
})
const gridOptions = reactive<VxeGridProps<Project>>({
  border: false,
  height: 'auto',
  columnConfig: {
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'id', visible: false },
    { field: 'name', title: '项目名', minWidth: 200, showOverflow: true, slots: { default: 'name' } },
    { field: 'flag', title: '唯一标识', minWidth: 180, showOverflow: true },
    { field: 'enable', title: '启用', width: 60, slots: { default: 'enable' } },
    { field: 'createdAt', title: '创建日期', width: 150, slots: { default: 'createdAt' } },
    { field: 'updatedAt', title: '更新日期', width: 150, slots: { default: 'updatedAt' } },
    { title: '操作', width: 180, slots: { default: 'operate' }, fixed: 'right' },
  ],
})
/**
 * 分页事件监听: 分页大小改变, 页号改变，都会触发该事件
 *
 * @param currentPage 当前页码
 * @param pageSize 每页显示记录数
 */
const onPageChange = ({ currentPage, pageSize }) => {
  run(currentPage, pageSize)
}
function onToApiPage(rowData: Project) {
  $router.push({
    name: 'ApiPage',
    params: { projectId: rowData.id },
    query: { projectName: rowData.name, projectFlag: rowData.flag },
  })
}
function onAdd() {
  AddEditModalRef.value?.openModal('新增')
}
async function onDel(rowData: Project) {
  await runRemove([rowData.id])
  run(tablePage.value.current, tablePage.value.size)
}
function onEdit(rowData: Project) {
  AddEditModalRef.value?.openModal('编辑', rowData)
}
function onAddSuc() {
  run(1, 15)
}
function onUpdateSuc() {
  run(tablePage.value.current, 15)
}
function dateFormat(iso8061DatetimeStr?: string) {
  if (iso8061DatetimeStr) {
    return iso8061DatetimeStrFormat(iso8061DatetimeStr)
  }
  return ''
}
</script>

<style scoped></style>
